<template>
  <div>
    <div class="title">改航计划</div>

    <div class="cmd-bar">
      <el-text>检索范围</el-text>
      <el-radio-group v-model="loadType" @change="handleLoad" size="small">
        <el-radio-button value="today">今日</el-radio-button>
        <el-radio-button value="range">自定义范围</el-radio-button>
      </el-radio-group>
      <div style="width: 180px">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleLoad"
          :disabled="loadType != 'range'"
          size="small"
        />
      </div>
      <!-- <el-button type="primary" @click="handleLoad">查询</el-button> -->
    </div>
    <el-empty v-if="data.length == 0" description="无内容" />
    <div v-else>
      <el-divider />
      <el-text type="primary" style="padding: 24px 0 12px 24px">已批复</el-text>
      <div class="content-wrapper">
        <CellContent
          v-for="cellData in data.filter((cell) => cell.status > 0)"
          :cellData="cellData"
        />
      </div>
      <el-divider />
      <el-text type="info" style="padding: 24px 0 12px 24px">未批复</el-text>
      <div class="content-wrapper">
        <CellContent
          v-for="cellData in data.filter((cell) => cell.status == 0)"
          :cellData="cellData"
        />
      </div>
    </div>
    <!-- <pre>{{ data }}</pre> -->
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import DataLoader from "./DataLoader.js";
import CellContent from "./CellContent.vue";
const data = ref([]);
const loadType = ref("today");
const dateRange = ref([new Date(), new Date()]);

const handleLoad = () => {
  if (loadType.value == "today") {
    DataLoader.load().then((res) => {
      data.value = res.content;
      console.log("DiversionLoad", res);
    });
  } else if (loadType.value == "range") {
    DataLoader.load(dateRange.value[0], dateRange.value[1]).then((res) => {
      data.value = res.content;
      console.log("DiversionLoad", res);
    });
  }
};

const timmerCode = ref(null);
onMounted(() => {
  handleLoad();
  timmerCode.value = setInterval(() => {
    if (loadType.value == "today") {
      handleLoad();
    }
  }, 10000);
});
onUnmounted(() => {
  clearInterval(timmerCode.value);
  timmerCode.value = null;
});
</script>

<style scoped>
.cmd-bar {
  display: flex;
  align-items: center;
  padding: 12px 24px;
}

.cmd-bar > *:not(:first-child, :last-child) {
  margin: 0 12px;
}

.title {
  font-size: 2em;
  color: var(--el-text-color-secondary);
  padding: 12px 24px;
}

.content-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 12px 24px;
}
</style>
